Font Awesomeなどフォントアイコン利用時のアクセシビリティ

例1 アイコンとテキスト

アクセシビリティ的に良くない書き方

code:html

フォト一覧

こう書く

i 要素に aria-hidden="true" を追加する。

code:html

フォト一覧

aria-hidden とは？

スクリーンリーダーのテキスト読み上げをスキップを指定する属性

値を true にするとスキップが有効になる（テキスト読み上げされない）

Font Awesome だと aria-hidden="true" がついた書き方がデフォルトになっている

例2 アイコンだけ

アクセシビリティ的に良くない書き方

code:html

こう書く

sr-only クラスを使ってアイコンを意味するラベルを追加する。

code:html

フォト一覧

sr-only とは？

ブラウザの表示上は見えないがスクリーンリーダーで読めるテキストのスタイル。

Bootstrap だと sr-only は以下のように指定されている。

code:css

.sr-only {

position: absolute;

width: 1px;

height: 1px;

padding: 0;

margin: -1px;

overflow: hidden;

clip: rect(0,0,0,0);

border: 0;

}

例3 そのほか

i 要素に title 属性を使うこともできる。

マウスを使って見ている人はマウスホバーでツールチップが表示される。

code:html

撮影する

</button>

参考